<!--
  文件描述：无缝滚动组件
-->
<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">采购交期预警</div>
      <div class="sale_date">
        <div class="status">
          <div>
            <span class="status_over" />
            逾期未交
          </div>
          <div>
            <span class="status_recently" />
            近3天交货
          </div>
          <div>
            <span class="status_normal" />
            正常
          </div>
        </div>
        <el-select v-model="warningSituation" :popper-append-to-body="false" multiple placeholder="请选择" @change="getMaintainMonth">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>

    <div class="echarts_container">
      <div class="header header_container" style="background:rgba(107, 189, 255, 0.2)">
        <div class="flex_item">状态</div>
        <div class="flex_item">采购订单号</div>
        <div class="flex_item">供应商名称</div>
        <div class="flex_item2">物料信息</div>
        <div class="flex_item">规格型号</div>
        <div class="flex_item">物料单位</div>
        <div class="flex_item">采购数量</div>
        <div class="flex_item2">采购交期</div>
      </div>
      <div v-if="tableData&&tableData.length>0" class="page-example3">
        <vue-seamless-scroll :data="tableData" :class-option="defaultOption">
          <div v-for="(item,index) in tableData" :key="index" class="header header_line">
            <div class="flex_item item_center item_color">
              <div v-if="item.warningSituation=='正常'" class="adequate_space">
                <svg-icon class="icon" icon-class="通过" />
                <span>正常</span>
              </div>
              <div v-if="item.warningSituation=='近3天交货'" class="insufficient_space">
                <svg-icon class="icon" icon-class="不足" />
                <span>近3天交货</span>
              </div>
              <div v-if="item.warningSituation=='逾期未交'" class="full_space">
                <svg-icon class="icon" icon-class="驳回" />
                <span>逾期未交</span>
              </div>
            </div>
            <div class="flex_item item_color">{{ item.code }}</div>
            <div class="flex_item item_color">{{ item.supplierName }}</div>
            <div class="flex_item2 item_color">{{ item.materialName }}</div>
            <div class="flex_item item_color">{{ item.materialModel }}</div>
            <div class="flex_item item_color">{{ item.materialUnitLabel }}</div>
            <div class="flex_item item_color">{{ item.purchaseNumber }}</div>
            <div class="flex_item2 item_color">{{ item.purchaseDeliveryTime }}</div>
          </div></vue-seamless-scroll>
      </div>
      <div v-else class="echarts_noData">
        <svg-icon icon-class="暂无数据" />
      </div>
    </div>

  </div>
</template>

<script>
import { purchaseDeliveryTimeWarning } from '@/api/purchaseManage/purchaseStatistics/purchaseBoard'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    // 这里存放数据
    return {
      tableData: [],
      options: [{
        value: '1',
        label: '逾期未交'
      }, {
        value: '2',
        label: '近3天交货'
      }, {
        value: '3',
        label: '正常'
      }],
      timer: undefined
    }
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 0.1,
        warningSituation: [],
        limitMoveNum: 6, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 210, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  // 监控data中的数据变化
  watch: {
    tableData(newValue, oldValue) {
      // if (newValue.length < 6) {
      //   clearInterval(this.timer)
      //   this.timer = setInterval(() => {
      //     this.getMaintainMonth()
      //   }, this.$store.state.common.refreshFrequency * 1000)
      // } else {
      //   clearInterval(this.timer)
      // }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.warningSituation = this.options.map(item => item.value)
    this.getMaintainMonth()
    this.timer = setInterval(() => {
      this.getMaintainMonth()
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.timer)
  },
  // 方法集合
  methods: {
    getMaintainMonth() {
      purchaseDeliveryTimeWarning({ type: this.warningSituation.toLocaleString() }).then(res => {
        this.tableData = res.data
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-input--medium{
  min-width: 300px;
}
.sale_date{
  padding-top: 16px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .status{
    display: flex;
    align-items: center;
    justify-content: space-around;
    white-space: nowrap;
    margin-right: 40px;
    div{
      font-size: 12px;
      margin-right: 10px;
    }
  }
}
.status_over{
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background:#F56C6C;
}
.status_recently{
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background:#FF9900;
}
.status_normal{
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background:#19BE6B;
}
.adequate_space{
  color: #19BE6B;
  background-color:rgb(223, 249, 241) ;
  border-radius: 3px;
  max-width: 120px;
  padding: 3px;
  text-align: center;
  display: flex;
  margin-left: 20px;
  .icon {
    margin-left: 15px;
    margin-top: 3px;
  }
  span {
    display: block;
    width: 80px !important;
    text-align: left;
    padding-left: 5px;
  }
}
.insufficient_space{
  color: #FF9900;
  background-color:rgb(255, 244, 237) ;
  border-radius: 3px;
  max-width: 120px;
  padding: 3px;
  text-align: center;
  margin-left: 20px;
  display: flex;
  .icon {
    margin-left: 15px;
    margin-top: 3px;
  }
  span {
    display: block;
    width: 80px !important;
    text-align: left;
    padding-left: 5px;
  }
}
.full_space{
  color: #F56C6C;
  background-color:rgb(255, 235, 236) ;
  border-radius: 3px;
  max-width: 120px;
  padding: 3px;
  text-align: center;
  display: flex;
  margin-left: 20px;

  .icon {
    margin-left: 15px;
    margin-top: 3px;
  }
  span {
    display: block;
    width: 80px !important;
    text-align: left;
    padding-left: 5px;
  }
}
.status_over{
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background:#F56C6C;
}
.status_recently{
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background:#FF9900;
}
.status_normal{
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background:#19BE6B;
}
.emergency_box{
  width: 100%;
  height: calc(100% - 50px);
}
.emergency_top{
  display: flex;
  justify-content: space-between;
  z-index: 99999;
  .emergency_title{
    font-size: 20px;
    line-height: 34px;
    font-weight: bold;
    letter-spacing: -0.21px;
    color: #333333;
    padding-top: 16px;
    padding-left: 20px;
    width: 100%;
  }
  .emergency_month{
    display: flex;
    font-size: 18px;
    font-weight: normal;
    line-height: 25px;
    letter-spacing: -0.16px;
    color: #999999;
    padding-top: 22px;
    padding-right: 20px;
    cursor: pointer;
    .emergency_ThisMarch1{
      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #387BFC;
      padding-right: 30px;
    }
    .emergency_ThisMarch2{
      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #387BFC;
    }
    .emergency_March{
      padding-right: 30px;
    }
    .emergency_LastMarch{
      padding-right: 30px;
    }
  }
}
.echarts_container{
  width: 100%;
  height: 100%;
  padding:10px 20px 40px 20px;
  .header{
    display: flex;
    flex-direction: row;
    align-items: center;
    //justify-content: space-around;
    padding:4px 0 ;
    border-bottom: 1px solid #15AFCD;
    .flex_item{
      flex: 1;
      text-align: center;
    }
    .flex_item2{
      text-align: center;
      flex: 2;
    }
    .item_color{
      color: rgba(102, 102, 102, 1);
      font-size: 15px;
    }
  }
  .header_line{
    border-bottom: 0.5px solid rgba(153, 153, 153, 0.2);
  }
}
.page-example3{
  width: 100%;
  height: 90% !important;
  overflow: hidden;
}

.header_container{
  .flex_item,.flex_item2{
    white-space:nowrap;
  }
}
/deep/ .el-select-dropdown {
  position: absolute !important;
  top: 35px !important;
  left: 0px !important;
  min-width: 120px;
}
/deep/ .el-select__tags{
  max-width: 90% !important;
}
</style>
